/*
 * @Author: Zero
 * @Date: 2019-11-12 09:52:45
 * @Last Modified by: Zero
 * @Last Modified time: 2019-11-12 15:01:29
 * @Target: 列表组件
 */
<template>
  <div class="list-component">
    <h3 class="list-component__header">
      <slot name="title">{{title}}</slot>
      <router-link class="list-component__header--more" v-if="more" :to="more">查看更多 ></router-link>
    </h3>
    <ul class="list-component__body">
      <li class="list-component__item" v-for="(item,index) in data" :key="index">
        <router-link :to="`${deafultProp.url}?${deafultProp.id}=${item[deafultProp.id]}`">
          <span class="list-component__item--title">
            <small :class="`is_${deafultProp.placement}`">[{{item[deafultProp.type]}}]</small>{{item[deafultProp.title]}}
          </span>
          <b class="list-component__item--time">{{item[deafultProp.time]}}</b>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'listComponent',
  props: {
    // 列表的标题
    title: {
      type: String,
      default: '公示公告'
    },
    // 列表的数据
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 列表每一行的字段配置
    prop: {
      type: Object,
      default: () => {
        return {
          id: "id",
          type: "type",
          title: "title",
          placement: "top", // type 的位置
          url: "/newDetail",
          time: "time"
        }
      }
    },
    // 查看更多的 url链接 或 路由对象
    more: {
      validator: (v) => {
        let type = Object.prototype.toString.call(v);
        // 验证数据类型 字符串||对象
        return type === '[object Object]' || type === "[object String]";
      },
      default: ''
    }
  },
  data() {
    return {

    }
  },
  computed: {
    // porp的实际值
    deafultProp() {
      return Object.assign({},{
        id: "id",
        type: "type",
        title: "title",
        placement: "top",
        url: "/newDetail",
        time: "time"
      }, this.prop);
    }
  }
}
</script>

<style lang="less" scoped>
.list-component {
  .list-component__header {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    border-bottom: 1px solid #e6e6e6;
    padding: 20px 0;
    display: flex;
    position: relative;
    .list-component__header--more {
      font-weight: normal;
      font-size: 14px;
      color: #9e9e9e;
      position: absolute;
      right: 0px;
      top: 50%;
      transform: translateY(-7px);
    }
    .list-component__header--more:hover {
      color: #216DE5;
    }
  }
  .list-component__body {
    .list-component__item {
      border-bottom: 1px solid #eee;
      padding: 20px 0;
      a {
        line-height: 1;
        overflow: hidden;
        display: block;
        color: #181F2A;
        position: relative;
        .list-component__item--title {
          font-size: 16px;
          width: calc(100% - 90px);
          float: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          small {
            color: #58595b;
            font-size: 14px;
            &.is_top {
              margin-bottom: 10px;
              display: block;
            }
            &.is_left {
              margin-right: 10px;
            }
          }
        }
        .list-component__item--title:hover {
          color: #216DE5;
        }
        .list-component__item--time {
          float: right;
          font-weight: normal;
          color: #999999;
          font-size: 16px;
          position: absolute;
          bottom: 0px;
        }
      }
    }
  }
}

</style>
